<template>
    <div class="childrenMenu-Div">
        <div class="contentBox-mainDiv">
            <span class="menuTitle">常用功能：</span>
            <div v-if="isMenuList">
                <span>暂无数据</span>
            </div>
            <div v-else>
                <div
                    class="menuDiv"
                    @click="toNext(item)"
                    v-if="item.view == true" v-for="(item,index) in childrenMenuList" :key="index"
                    style="">
                    <div>
                        <span class="badge" v-if="item.count !== 0">{{ itemCount(item.count) }}</span>
                        <i
                            v-if="item.icon && iconType(item.icon)"
                            class="menuDiv-icon iconfont"
                            :class="item.icon"
                            >
                        </i>
                        <ych-icon
                            v-else
                            class="menuDiv-icon"
                            :type="item.icon"
                            >
                        </ych-icon>
                    </div>
                    <span>{{ item.name }}</span>
                </div>
            </div>
        </div>
        <div style="width:100%;height: calc(100vh - 331px);">
            <toDoList-modal v-if="dbrList" :occupancyHeight="180"></toDoList-modal>
            <daiBan-modal v-if="isNeiBuShiWu" :occupancyHeight="180"></daiBan-modal>
        </div>
        <!-- <a-row>
            <a-col @click="toNext(item)" v-if="item.view == true" v-for="(item,index) in childrenMenuList" :key="index" :span="6" class="menuCol">
                <div class="menuCol-div" :style="{backgroundImage: bg4(item.name)}">
                    <span class="badge" v-if="item.count !== 0">{{ itemCount(item.count) }}</span>
                    <ych-icon
                        class="menuDiv-icon"
                        :type="item.icon"
                        :style="{color: bg4(item.name,'icon')}">
                    </ych-icon><br/>
                    {{ item.name }}
                </div>
            </a-col>
        </a-row> -->
    </div>
</template>
<script>
import { queryTopChildrenMenuList, } from './service/index'
import toDoListModal from '../../reviewVerificationManage/toDoList/index.vue'
import daiBanModal from '../../administrativeOffice-new/daiBan/index.vue'
export default {
    name: 'children-Menu',
    components:{
        toDoListModal,daiBanModal
    },
    props:{
        dbrList: {
            type: [Boolean,String],
            default:()=>{
                return false
            },
            required:false,
        },
        isNeiBuShiWu: {
            type: Boolean,
            default:()=>{
                return false
            },
            required:false,
        },
    },
    data(){
        return{
            childrenMenuList: [],
            isMenuList: false,
        }
    },
    watch:{

    },
    mounted(){
        this.getData()
    },
    methods:{
        getData(){
            // //console.log(this.$route.query.id)
            queryTopChildrenMenuList({id:this.$route.query.id}).then(res => {
                // //console.log(res)
                this.childrenMenuList = res.result
                if(res.result.length == 0){
                    this.isMenuList = true
                }
            })
        },
        toNext(item){
            // this.$router.push({
            //     path: item.path,
            // }).catch(err => {});
            if(item.open == false){
                this.$router.push({
                    path: item.path,
                    query: { id: item.id }
                }).catch(err => {});
            } else {
                this.$router.push({
                    path: '/homeComp/ordinary/childrenMenu',
                    query: { id: item.id }
                }).catch(err => {});
            }
        },
        itemCount(count){
            if(count >=1 && count <= 99){
                return count
            } else {
                return '99+'
            }
        },
        iconType(name){
            if(name.substr(0,4) == 'spcy'){
                return true
            } else {
                return false
            }
        }
    },
    computed:{
        bg4 (){
            return function(str,icon){
                let asciiSum = 0;
                for (let i = 0; i < str.length; i++) {
                    asciiSum += str.charCodeAt(i);
                }
                // //console.log(asciiSum)
                const red = Math.abs(Math.sin(asciiSum) * 300).toFixed(0);
                const green = Math.abs(Math.sin(asciiSum + 1) * 200).toFixed(0);
                const blue = Math.abs(Math.sin(asciiSum + 2) * 220).toFixed(0);
                // //console.log(red,green,blue)
                const color1 =  `rgba(${red}, ${green}, ${blue}, 0.8)`;
                const color2 =  `rgba(${red}, ${green}, ${blue}, 0.5)`;
                if(icon == 'icon'){
                    // //console.log('icon')
                    return `${color1}`;
                } else {
                    return `linear-gradient(135deg, ${color1}, ${color2})`;
                }
            }
        },
    }
}
</script>
<style lang="less" scoped>
.childrenMenu-Div {
    width: 100%;
    // height: 100%;
    background-color: white;
    .contentBox-mainDiv {
            height: 140px;
            background: #fff;
            padding: 30px 0px 20px 70px;
            border-bottom: 1px dashed ;
            .menuTitle {
                position: absolute;
                left: 25px;
                top: 5px;
            }
            .menuDiv {
                // width: 100px;
                height: 100px;
                margin-right: 20px;
                // background-color: aquamarine;
                display: inline-block;
                position: relative;
                text-align: center;
                .badge {
                    position: absolute;
                    top: -10px;
                    right: 0px;
                    width: 25px;
                    height: 25px;
                    background-color: red;
                    color: white;
                    border-radius: 50%;
                    text-align: center;
                    line-height: 25px;
                    font-size: 16px;
                    -webkit-transition: all 0.5s ease;
                    -moz-transition: all 0.5s ease;
                    -o-transition: all 0.5s ease;
                }
                .menuDiv-icon {
                    width: 70px;
                    height: 70px;
                    line-height: 70px;
                    font-size: 26px;
                    color: #fff;
                    border-radius: 50%;
                    margin: 0 auto;
                    display: inline-block;
                    text-align: center;
                }
            }
            .menuDiv:nth-child(5n+1) div > .menuDiv-icon {
                background-image: linear-gradient(135deg, rgba(28, 157, 208, 0.8);
                rgba(28, 157, 208, 0.5))
            }
            .menuDiv:nth-child(5n+2) div > .menuDiv-icon {
                background-image: linear-gradient(135deg, rgba(115, 197, 150, 0.8);
                 rgba(115, 197, 150, 0.5))
            }
            .menuDiv:nth-child(5n+3) div > .menuDiv-icon {
                background-image: linear-gradient(135deg, rgba(67, 140, 215, 0.8);
                 rgba(67, 140, 215, 0.5))
            }
            .menuDiv:nth-child(5n+4) div > .menuDiv-icon {
                background-image: linear-gradient(135deg, rgba(117, 113, 220, 0.8);
                rgba(117, 113, 220, 0.5))
            }
            .menuDiv:nth-child(5n+5) div > .menuDiv-icon {
                background-image: linear-gradient(135deg, rgba(233, 137, 161, 0.8);
                rgba(220, 156, 113, 0.5))
            }
            // .menuCol {
            //     height: 190px;
            //     text-align: center;
            //     padding: 20px;
            //     .menuCol-div {
            //         width: 100%;
            //         height: 100%;
            //         // background-color: bisque;
            //         color: #fff;
            //         padding-top: 40px;
            //         border-radius: 10px;
            //         margin: 15px 0;
            //         box-shadow: 3px 3px 6px rgba(136,136,136,0.5);
            //         -webkit-transition: all 0.5s ease;
            //         -moz-transition: all 0.5s ease;
            //         -o-transition: all 0.5s ease;
            //         .menuDiv-icon {
            //             width: 50px;
            //             height: 50px;
            //             border-radius: 50%;
            //             // border: 1px solid red;
            //             background-color: #fff;
            //             line-height: 50px;
            //             font-size: 24px;
            //         }
            //         .badge {
            //             position: absolute;
            //             top: 25px;
            //             right: 5px;
            //             width: 25px;
            //             height: 25px;
            //             background-color: red;
            //             color: white;
            //             border-radius: 50%;
            //             text-align: center;
            //             line-height: 25px;
            //             font-size: 16px;
            //             -webkit-transition: all 0.5s ease;
            //             -moz-transition: all 0.5s ease;
            //             -o-transition: all 0.5s ease;
            //         }
            //     }
            //     .menuCol-div:hover {
            //         height: 110%;
            //         width: 110%;
            //         font-size: 18px;
            //         margin: -15px;
            //         .menuDiv-icon {
            //             font-size: 28px;
            //         }
            //         .badge {
            //             top: 0;
            //             right: 0;
            //         }
            //     }

            // }
        }
}
</style>
